<template>
  <view
      v-if="chapterId > 0"
      :style="{paddingBottom: safeBottom + 'px', backgroundImage:
       `url(https://seerh5.61.com/resource/assets/mainLine/Pet/${chapterId}.png)`
      }"
      style="
        height: 100vh;
        background-color: #182f4d;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: -140px
      "
  >
    <view :style="{height: height + 'px'}"></view>
    <!-- 顶部自定义导航 -->
    <TnNavbar fixed alpha customBack :placeholder="false" bg-color="transparent" :bottom-shadow="false">
      <view slot="back" class='tn-custom-nav-bar__back'>
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
      <image style="width: 50rpx; height: 50rpx;margin-right: 5px"
             :src="`https://seerh5.61.com/resource/assets/mainLine/Logo/${chapterId}.png`"></image>
      <text class="text-white">{{ chapterTitle }}</text>
    </TnNavbar>
    <scroll-view scroll-y style="padding-top: 10px" :style="{height: `calc(100vh - ${height +safeBottom}px)`}">
      <view style="background-color: rgba(47,79,126,0.9); margin: 0 10px;border-radius: 5px;">
        <view style="color: #b7cdfe; padding: 30rpx" class="text-lg">{{ chapterDes }}</view>
        <TnCollapse>
          <TnCollapseItem
              v-for="(item, index) in storyList"
              :key="index"
              :disabled="item.is_future === 1"
          >
            <template #title>
              <view style="color: #b7cdfe">
                <image src="/static/title.png" style="width: 10px;height: 10px"></image>
                {{ item.chapter_id + '-' + item.id }}
                <text>{{ item.title }}</text>
              </view>
            </template>
            <view class="text-white">
              {{ item.des }}
            </view>
            <view class="flex justify-end margin-tb">
              <button @tap="toAnimate(item)" class="cu-btn" style="background-color: #ffd43d; color: #9e5d19">开启剧情</button>
            </view>
          </TnCollapseItem>
        </TnCollapse>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import TnNavbar from "../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import {useUniAppSystemRectInfo} from "../../uni_modules/tuniaoui-vue3";
  import {ref} from 'vue';
  import TnCollapse from '@/uni_modules/tuniaoui-vue3/components/collapse/src/collapse.vue'
  import TnCollapseItem from '@/uni_modules/tuniaoui-vue3/components/collapse/src/collapse-item.vue'
  import {onLoad, onShareAppMessage} from '@dcloudio/uni-app'

  onShareAppMessage(() => {
    return {
      title: chapterTitle.value,
      imageUrl: 'https://seerforwdw.info/seer-image/diduo.jpg',
      path: '/pagesA/story/story?story=' + JSON.stringify(storyList.value) + '&title=' + chapterTitle.value + '&id=' + chapterId.value +
          '&des=' + chapterDes.value
    }
  })

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  const chapterTitle = ref('')

  const chapterId = ref(0)

  const chapterDes = ref('')

  const storyList = ref([])

  const toAnimate = (item) => {
    uni.navigateTo({
      url: './animate?story_id=' + item.id + '&chapter_id=' + item.chapter_id + '&name=' + item.title
    })
  }

  onLoad((res) => {
    chapterId.value = Number(res.id)
    chapterTitle.value = res.title
    chapterDes.value = res.des
    storyList.value = JSON.parse(res.story)
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
  })
</script>

<style scoped lang="scss">
  :deep(.tn-collapse-item.is-disabled) {
    background-color: transparent !important;
  }
</style>
